<script setup>
import {onLoad,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
import {ref,getCurrentInstance} from 'vue'
import {reqGoodsDetail} from '../api/goods.js'
import { useMemberStore } from '/stores/modules/member.js'
import {reqAddCart,reqCartList} from '../api/cart.js'
const {proxy} = getCurrentInstance()
const memberStore = useMemberStore()
const {token} = memberStore.profile
// 商品ID
let goodsId = ref()
// 商品详情的对象
const goodsDetail = ref()
const getGoodsDetail = async()=>{
	const res = await reqGoodsDetail(goodsId.value)
	// console.log(res);
	goodsDetail.value=res.data
	// console.log(goodsDetail.value);
}
onLoad(async(options)=>{
	goodsId.value = options.goodsId
	await getGoodsDetail()
	await getCartCount()
})
// 祝福语
let blessing = ref('')
// 控制是加入购物车还是立即购买
let buyNowStatus = ref(0)
// 弹出框的引用
const popup = ref()
// 加入购物车
const addCart = ()=>{
	popup.value.open()
	buyNowStatus.value=0
}
// 立即购买
const buyNow = ()=>{
	popup.value.open()
	buyNowStatus.value=1
}
// 放大展示商品图片
const showBigImg = ()=>{
	uni.previewImage({
		urls:goodsDetail.value.detailList
	})
}
// 商品总数
let goodsTotal = ref(1)
const countChange = (count) =>{
	if(count<0){
		if(goodsTotal.value===1) return
		goodsTotal.value--		
	}else{
		if(goodsTotal.value>=200) return
		goodsTotal.value++	
	}
}
//对商品的数量进行处理，确保输入框的值在0到200之间
const goodsTotalChange =(e)=>{
	// console.log(typeof e.detail.value);
	if(e.detail.value!==''){
		// tempGoodsTotal.value = Number(e.detail.value)
		let tempCount = Number(e.detail.value)
		if(tempCount>0&&tempCount<=200){
			goodsTotal.value=tempCount
		}else{
			goodsTotal.value=1
		}
	}
	// console.log(goodsTotal.value);
}
// 在输入框失去焦点的时候处理空字符串
const blurGoodsTotal = (e)=>{
	if(e.detail.value===''){
		goodsTotal.value=1
	}
	// console.log(goodsTotal.value);
}
// 获取文本域的值
const blessingChange=(e)=>{
	blessing.value = e.detail.value
}
// 加入购物车的逻辑
const handlerSubmit = async()=>{
	if(blessing.value.length===0){
		proxy.$toast({title:'请输入祝福语'})
		return
	}
	if(!token){
		return uni.navigateTo({url:'/pages/login/login'})
	}
	if(buyNowStatus.value===0){
		// console.log(goodsId.value,goodsTotal.value,blessing.value);
		const res = await reqAddCart({goodsId:goodsId.value,count:goodsTotal.value,blessing:blessing.value})
		if(res.code===200){
			proxy.$toast({title:'加入购物车成功！'})
			await getCartCount()	
			popup.value.close()
		}
		// console.log(res);		
	}else{
		uni.navigateTo({
			url:`/pagesPay/detail/detail?goodsId=${goodsId.value}&blessing=${blessing.value}`
		})
	}
}
// 购物车数量红点
let sumCount =ref('')
// 获取购物车的数量
const getCartCount =async()=>{
	// 没有token就不需要获取购物车数量
	if(!token) return
	const res = await reqCartList()
	let tempCount = 0
	// console.log(res.data);
	if(res.data.length!==0){
		tempCount=res.data.reduce(
		(val,val1)=>{
			return val+val1.count
		},0)
	}
	sumCount.value=tempCount>99?'99+':tempCount.toString()
	// console.log(sumCount.value);
}
// 转发给好友，群聊
onShareAppMessage(()=>{
	return {
		title:'所有的怦然心动，都是你',
		path:'/pages/index/index',
		imageUrl:'/static/images/banner.jpg'
	}
})
// 把小程序分享到朋友圈
onShareTimeline(()=>{
	
})
</script>

<template>
	<scroll-view scroll-y="true" class="scroll-y">
		<view class="nav">
			<image :src="goodsDetail.imageUrl" class="main-img" mode="widthFix" @click="showBigImg"></image>				
			<view class="desc">
				<view class="bottom">
					<view class="price-content">
						<text class="price">￥{{goodsDetail.price}}</text>
						<text class="del-price">￥{{goodsDetail.stockCount}}</text>
					</view>
				</view>
				<view class="good-name">{{goodsDetail.name}}</view>
				<view class="intro">{{goodsDetail.floralLanguage}}</view>
			</view>
			<view class="img-intro">
				<image :src="item" v-for="(item,index) in goodsDetail.detailList" v-bind:key="index" class="img" mode="widthFix"></image>
			</view>
		</view>
	</scroll-view>
	<view class="add-cart-bottom">
		<view class="items">
			<navigator class="go-index" url="/pages/index/index" open-type="reLaunch">
				<text class="iconfont icon-shouye"></text>
				<text>首页</text>
			</navigator>
			<navigator class="go-cart" url="/pages/cart/cart" open-type="reLaunch">
				<text class="iconfont icon-gouwuche icon"></text>
				<text>购物车</text>
				<view class="count-tag" v-show="sumCount!=='0'">{{sumCount}}</view>
			</navigator>
			<view class="customer-service">
				<text class="iconfont icon-kefu"></text>
				<text>客服</text>
			</view>
		</view>
		<view class="btns">
			<button class="add-cart" @click="addCart">加入购物车</button>
			<button class="buy-now" @click="buyNow">立即购买</button>
		</view>
	</view>
	<uni-popup ref="popup" background-color="#fff" type="bottom" borderRadius="10px 10px 0 0">
		<view class="popup-content">
			<view class="goods-sku">
				<view class="l">
					<image class="goods-img" :src="goodsDetail.imageUrl"></image>
				</view>
				<view class="r">
					<view class="tit">{{goodsDetail.name}}</view>
					<view class="count-price">
						<view class="price-yuan">￥<text class="yuan">{{goodsDetail.price}}</text></view>
						<view class="count" v-if="buyNowStatus===0">
							<button class="sub btn" @click="countChange(-1)">-</button>
							<input type="number"
							 class="count-number"
							 :value="goodsTotal" 
							 @blur="blurGoodsTotal"
							 @input="goodsTotalChange">
							<button class="plus btn" @click="countChange(1)">+</button>
						</view>
					</view>
				</view>
			</view>
			<view class="wish">
				<view class="tit">祝福语</view>
				<view class="wish-content">
					<textarea name="" id=""
					:value="blessing"
					class="wish-textarea" 
					@input="blessingChange"
					placeholder="必填,写上您的祝福语,给心爱的ta送上你的祝福(请勿填写特殊符号或表情符号)">						
					</textarea>
				</view>
			</view>
			<div class="popup-btn">
				<button class="add" @click="handlerSubmit">确定</button>
			</div>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
.scroll-y{
	.nav{
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 100rpx;
		.main-img{
			width: 100%;
			height: 700rpx;
			border-radius: 10rpx;	
			
		}
		.desc{
			padding: 0 16rpx;
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			top: 720rpx;
			background: #ffffff;
			border-radius: 20rpx;
			z-index: 1;
			.good-name{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: bold;
				font-size: 32rpx;
				margin: 16rpx 0;
			}
			.intro{
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 24rpx;
				color: #9d9d9d;
				margin-bottom: 16rpx;
			}
			.bottom{				
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price-content{
					.price{
						font-weight: bold;
						font-size: 30rpx;
						color: #f3514f;
						margin-right: 12rpx;
					}
					.del-price{
						color: #9d9d9d;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
		.img-intro{	
			margin-bottom: 70rpx;
			.img{
				width: 100%;
			}
		}
	}
}
.add-cart-bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: #ffffff;
	padding: 10rpx 0;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	.items{
		display: flex;
		flex-direction: row;
		width: 45%;
		.go-index,.go-cart,.customer-service{
			display: flex;
			flex-direction: column;
			color:#939393;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			flex:1;
		}
		.go-cart{
			position: relative;
			.count-tag{
				position: absolute;
				top: -2rpx;
				right: 10rpx;
				background: red;
				color: white;
				font-size: 16rpx;
				border-radius: 50%;
				width: 34rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
			}
		}		
	}
	.btns{
		display: flex;
		flex-direction: row;	
		margin-right: 20rpx;
		.add-cart,.buy-now{
			color:#ffffff;
			font-size: 28rpx;
			height: 76rpx;
			font-weight: bold;
		}
		.add-cart{
			border-radius: 40rpx 0 0 40rpx;
			background: #e5b00e;
		}
		.buy-now{
			border-radius: 0 40rpx 40rpx 0;
			background: #f3514f;
		}
	}
}
.popup-content{
	padding: 20rpx;
	.goods-sku{
		display: flex;
		flex-direction: row;
		.l{
			height: 200rpx;
			width: 200rpx;
			.goods-img{
				width: 100%;
				height: 100%;
			}
		}
		.r{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex:1;
			margin-left: 16rpx;
			.tit{
				font-size: 28rpx;
			}
			.count-price{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price-yuan{
					color: #f3514f;
					.yuan{
						font-size: 36rpx;
						font-weight: bolder;
					}
				}
				.count{
					display: flex;
					text-align: center;
					.btn{
						padding-left: 0;
						padding-right: 0;
						width: 42rpx;
						height: 42rpx;
						background: #cacaca;
						line-height: 42rpx;						
					}
					.count-number{
						background: #cacaca;
						height: 42rpx;
						width: 48rpx;
						font-size: 24rpx;
						margin: 0 8rpx;
						line-height: 42rpx;		
						min-height: 42rpx;
						border-radius: 10rpx;						
					}
				}
			}
		}
	}
	.wish{
		.tit{
			font-size: 28rpx;
			margin: 10rpx 0;
		}	
		.wish-content{
			.wish-textarea{
				width: calc(100% - 32rpx);
				background: #e7e7e7;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 16rpx;
			}
			margin-bottom: 30rpx;
		}
	}
	.popup-btn{
		text-align: center;
		.add{
			color: #ffffff;
			background: #00af02;
			width: 80%;
			height: 70rpx;
			font-size: 26rpx;
			line-height: 70rpx;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
		}
	}
}
</style>
